<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin.pro/css/h-ui.admin.pro.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin.pro/skin/default/skin.css" id="skin"/>

    <link rel="stylesheet" type="text/css" href="static/business/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>宿舍信息统计界面</title>
    <meta name="keywords" content="h-ui.admin.pro v1.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="h-ui.admin.pro v1.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<!--_menu 作为公共模版分离出去-->
<aside class="Hui-admin-aside-wrapper">
    <div class="Hui-admin-logo-wrapper">
        <a class="logo navbar-logo" href="/aboutHui.shtml">
            <i class="va-m iconpic global-logo"></i>
            <span class="va-m">H-ui.admin</span>
        </a>
    </div>
    <div class="Hui-admin-menu-dropdown bk_2">
        <ul class="Hui-menu"></ul>
    </div>
</aside>
<div class="Hui-admin-aside-mask"></div>
<!--/_menu 作为公共模版分离出去-->

<div class="Hui-admin-dislpayArrow">
    <a href="javascript:void(0);" onClick="displaynavbar(this)">
        <i class="Hui-iconfont Hui-iconfont-left">&#xe6d4;</i>
    </a>
</div>

<section class="Hui-admin-article-wrapper">
    <!--_header 作为公共模版分离出去-->
    <header class="Hui-navbar">
        <div class="navbar">
            <div class="container-fluid clearfix">
                <nav id="Hui-userbar" class="nav navbar-nav navbar-userbar">
                    <ul class="clearfix">
                        <li>超级管理员</li>
                        <li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">admin <i
                                class="Hui-iconfont">&#xe6d5;</i></a>
                            <ul class="dropDown-menu menu radius box-shadow">
                                <li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>
                                <li><a href="javascript:location.href='exitServlet'">切换账户</a></li>
                                <li><a href="javascript:location.href='exitServlet'">退出</a></li>
                            </ul>
                        </li>
                        <li id="Hui-msg"><a href="maintain-manage.html" title="消息"><span id="tipNum" class="badge badge-danger">0</span><i
                                class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a></li>
                        <li id="Hui-skin" class="dropDown dropDown_hover right">
                            <a href="javascript:;" class="dropDown_A" title="换肤"><i class="Hui-iconfont"
                                                                                    style="font-size:18px">&#xe62a;</i></a>
                            <ul class="dropDown-menu menu radius box-shadow">
                                <li><a href="javascript:;" data-val="default" title="默认（蓝色）">默认（深蓝）</a></li>
                                <li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
                                <li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
                                <li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
                                <li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <!--/_header 作为公共模版分离出去-->

    <div class="Hui-admin-article">
        <article class="Hui-admin-content clearfix">

            <div class="panel mt-20">
                <div id="main" style="width: 450px;height:400px;float:right;"></div>

                <div id="main1" style="width: 600px;height:400px; float: left"></div>
            </div>
        </article>
    </div>
</section>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="static/h-ui.admin.pro/js/h-ui.admin.pro.js"></script>
<!--/_footer /作为公共模版分离出去-->


<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="static/business/js/main1.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript">


    $(function () {
        $.ajax({
            url: 'managerTest?action=queryAll',
            type: 'post',
            async: false,
            dataType: 'json',
            success(result) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    tooltip: {
                        trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
                        showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                        hideDelay: 100,            // 隐藏延迟，单位ms
                        transitionDuration: 0.4,  // 动画变换时间，单位s
                        backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
                        borderColor: '#333',       // 提示边框颜色
                        borderRadius: 4,           // 提示边框圆角，单位px，默认为4
                        borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
                        padding: 5,                // 提示内边距，单位px，默认各方向内边距为5，
                        // 接受数组分别设定上右下左边距，同css
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line',         // 默认为直线，可选为：'line' | 'shadow'
                            lineStyle: {          // 直线指示器样式设置
                                color: '#48b',
                                width: 2,
                                type: 'solid'
                            },
                            shadowStyle: {                       // 阴影指示器样式设置
                                width: 'auto',                   // 阴影大小
                                color: 'rgba(150,150,150,0.3)'  // 阴影颜色
                            }
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },

                    series: [{
                        data: [
                            {value: result.data.allRoom, name: '宿舍总间数'},
                            {value: result.data.allBed, name: '宿舍总床位数'},
                            {value: result.data.people, name: '已入住人数'},
                            {value: result.data.man, name: '已入住男生人数'},
                            {value: result.data.woman, name: '已入住女生人数'},
                            {value: result.data.manLeft, name: '男寝剩余床位'},
                            {value: result.data.womanLeft, name: '女寝剩余床位'},
                            {value: result.data.nullLeft, name: '空寝室总数'},
                            {value: result.data.towLeft, name: '双人间空寝数'},
                            {value: result.data.fourLeft, name: '四人间空寝数'},
                            {value: result.data.sixLeft, name: '六人间空寝数'}
                        ],
                        type: 'pie',
                        radius: '55%',
                        // 高亮样式。
                        emphasis: {
                            label: {
                                show: true,
                                // 高亮时标签的文字
                                formatter: '高亮时显示的标签内容'
                            }
                        },
                        // 此系列自己的调色盘。
                        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);


                // 基于准备好的dom，初始化echarts实例
                var myChart1 = echarts.init(document.getElementById('main1'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '宿舍信息统计'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["宿舍总间数", "宿舍总床位数", "已入住人数", "已入住男生人数", "已入住女生人数"
                            , "男寝剩余床位", "女寝剩余床位", "空寝室总数", "双人间空寝数", "四人间空寝数", "六人间空寝数"]
                    },
                    yAxis: {},
                    series: [{
                        name: '人数',
                        type: 'bar',
                        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
                        data: [result.data.allRoom, result.data.allBed, result.data.people, result.data.man, result.data.woman, result.data.manLeft,
                            result.data.womanLeft, result.data.nullLeft, result.data.towLeft, result.data.fourLeft, result.data.sixLeft,]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option);

            }

        })
    });




</script>
</body>
</html>